<template>
  <div class="manage">
      <el-dialog
        :title="operateType === 'add'? '新增用户':'更新用户'"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              ></common-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
      <div class="manage-header">
        <el-button type="primary" @click="addUser">
          + 新增
        </el-button>
         <common-form
              :formLabel="formLabel"
              :form="searchForm"
              :inline="true"
              ref="form"
              >
        <el-button type="primary" @click="getList">搜索</el-button>
        </common-form>
      </div>
      <div class="table">
          <table>
              <thead>
                  <tr>
                      <th>姓名</th>
                      <th>姓名</th>
                      <th>姓名</th>
                      <th>姓名</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>姓名</td>
                      <td>姓名</td>
                      <td>姓名</td>
                      <td>姓名</td>
                  </tr> 
                   <tr>
                      <td>姓名</td>
                      <td>姓名</td>
                      <td>姓名</td>
                      <td>姓名</td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
</template>

<script>
import cookie from '../../cookie/index'
import CommonForm from '../ly/Common/CommonForm.vue'
export default {
    name:'ShopCoupon',
    components:{CommonForm},
    data() {
      return {
        operateType:'add',
        isShow:false,
        operateFormlabel:[
          {
            model:'name',
            label:'姓名',
            type:'input'
          },
           {
            model:'age',
            label:'年龄',
            type:'input'
          },
           {
            model:'sex',
            label:'性别',
            type:'select',
            opts:[
              {
                label:'男',
                value:1
              },
               {
                label:'女',
                value:0
              },
            ]
          },
          {
            model:'birth',
            label:'出生日期',
            type:'date'
          },
          {
            model:'addr',
            label:'地址',
            type:'input'
          },
        ],
        operateForm:{
          name:'',
          age:'',
          sexLabel:'',
          birth:'',
          addr:''
        },
        formLabel:[
          {
            model:'keyword',
            label:'',
            type:'input'
          }
        ],
        searchForm:{
          keyword:''
        },
      }
    },
    methods:{
      confirm(){
        if(this.operateType === 'add'){
          this.tableData.push(this.operateForm)
          this.isShow = false
        }
      },
      addUser(){
        this.isShow = true
        this.operateType = 'add'
        this.operateForm = {
          name:'',
          age:'',
          sex:'',
          birth:'',
          addr:''
        }
      },
      delUser(row){
        console.log(row);
         this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
           this.$message({
             type: "success",
              message: "删除成功!"
            })
          })
      },
      editUser(row){
        console.log(row);
        this.isShow = true
        this.operateType = 'edit'
        this.operateForm = row
      },
      getList(){
          this.$http({
                url:'/shops/shopper/appoint/findMyShopAppoint',
                method:'GET',
                params:{
                    page:1,
                    shopId:1,
                    size:5
                },
                headers: { 'Authorization': cookie.getToken() }
            }).then(data => {

                console.log(data);
            }).catch(err => {
                console.log(err);
            })
      }
    },
    created(){
      this.getList();
    }
}
</script>

<style lang="less" scoped>

.manage-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table{
    width: 90%;
    padding: 30px;
    border: 1px solid rgb(212, 212, 212);
    border-radius:5px ;
    table{
        border-collapse:collapse;
        width: 100%;
        thead{
            tr{
                height: 60px;
                th{
                    border-bottom: 1px solid rgb(212, 212, 212);
                    padding-left: 10px;
                    text-align: left;
                }
            }
        }
        tbody{
            tr{
                 height: 65px;
                td{
                    word-wrap:break-word;
                    border-bottom: 1px solid rgb(212, 212, 212);
                    padding-left: 10px;
                }
            }
        }
    }
}
</style>